<template>
  <Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="详情" width="800">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="日志主键" min-width="120">
        {{ detailData.id }}
      </el-descriptions-item>
      <el-descriptions-item label="业务流水号">
        {{ detailData.seq }}
      </el-descriptions-item>
      <el-descriptions-item label="模块名">
        {{ detailData.moduleName }}
      </el-descriptions-item>
      <el-descriptions-item label="业务类型">
        {{ detailData.businessType }}
      </el-descriptions-item>
      <el-descriptions-item label="操作类型">
        {{ detailData.operateType }}
      </el-descriptions-item>
      <el-descriptions-item label="发送数据">
        <el-input v-model="detailData.reqRaw" :readonly="true" type="textarea" />
      </el-descriptions-item>
      <el-descriptions-item label="接收数据">
        <el-input v-model="detailData.respRaw" :readonly="true" type="textarea" />
      </el-descriptions-item>
      <el-descriptions-item label="请求发送时间">
        {{ formatDate(detailData.reqTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="请求结束时间">
        {{ formatDate(detailData.respTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="是否成功">
        <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.success" />
      </el-descriptions-item>
      <el-descriptions-item label="异常信息">
        <el-input v-model="detailData.errorMsg" :readonly="true" type="textarea" />
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ formatDate(detailData.createTime) }}
      </el-descriptions-item>
    </el-descriptions>
    <ContentWrap v-if="detailData.history">
      <el-table :data="JSON.parse(detailData.history)">
        <el-table-column label="发送数据" prop="reqRaw">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" :content="scope.row.reqRaw" placement="top">
              ...
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="接收数据" prop="respRaw">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" :content="scope.row.respRaw" placement="top">
              ...
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="异常信息" prop="errorMsg" show-overflow-tooltip>
          <template #default="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.errorMsg"
              placement="top"
            >
              ...
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="是否成功" prop="success">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.success" />
          </template>
        </el-table-column>
        <el-table-column
          label="请求发送时间"
          prop="reqTime"
          :formatter="dateFormatter"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          label="请求返回时间"
          prop="respTime"
          :formatter="dateFormatter"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          label="创建时间"
          prop="createTime"
          :formatter="dateFormatter"
          width="180"
          show-overflow-tooltip
        />
      </el-table>
    </ContentWrap>
  </Dialog>
</template>
<script lang="ts" name="ApiErrorLogDetail" setup>
import { formatDate, dateFormatter } from '@/utils/formatTime'
import * as DataPushLogApi from '@/api/system/dataPushLog'
import { DICT_TYPE } from '@/utils/dict'

const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中
const detailData = ref() // 详情数据

/** 打开弹窗 */
const open = async (id: number) => {
  detailLoading.value = true
  try {
    detailData.value = await DataPushLogApi.getDataPushLog(id)
    dialogVisible.value = true
  } finally {
    detailLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
